<template>
  <div id="app" class="d-flex p-2 flex-grow-1 flex-row">
    <div class="flex-grow-0 flex-shrink-0 d-flex flex-column" style="flex-basis: 30rem;">
      <directory class="flex-grow-1"
        ref="directory"
        :url.sync="url"
        @fresh="setDir"
        @remove="removeDirectory"
        @create="createDirectory"
        @rename="renameDirectory"
        @move="moveDirectory"
        />
    </div>
    <div class="flex-grow-1 d-flex flex-column">
      <template v-if="dir">
        <images :content="dir.content" :dir_id="dir._id" :key="dir._id"
          class="flex-grow-1"
          @remove="removeFromCurDirectory"
          @upload="uploadToCurDirectory"
          @rename="renameImage"
          @addExtendInfo="addImageInfo"
          @editExtendInfo="editExtendInfo"
          @removeExtendInfo="removeExtendInfo"
          @copy="copyImages"
          @move="moveImages"
          @searchByImage="searchByImage"
          />  
      </template>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import Vue from 'vue'
import $ from 'jquery'
import directory from './components/directory'
import {constant as directoryConstant} from './components/directory'
import images from './components/image-list'
import nameModal from './components/nameModal'
import confirmModal from './components/confirmModal'
import extendInfo from './components/extendInfoModal'
import directoryMoveModal from './components/directoryMoveModal'
import imageMoveModal from './components/imageMoveModal'
import imageSearchModal from './components/imageSearchModal'

var nameModalC = Vue.extend(nameModal);
var confirmModalC = Vue.extend(confirmModal);
var extendInfoC = Vue.extend(extendInfo);
var directoryMoveModalC = Vue.extend(directoryMoveModal);
var imageMoveModalC = Vue.extend(imageMoveModal);
var imageSearchModalC = Vue.extend(imageSearchModal);

import uploader from './components/uploader'
import VModal from 'vue-js-modal'
Vue.use(VModal,{ dynamic: true, injectModalsContainer: true })

var defaultCancel = function() {
  var vm = this;
  vm.cancel();
}

export default {
  name: 'App',
  components: {
    directory, images
  },
  data() {
    return {
      imageUID: 0,
      dir: null,
      url: directoryConstant.ROOT_URL
    }
  },
  methods: {
    async setDir(doc) {
      var vm = this;
      if (vm.dir && doc && !_.isEqual(vm.dir.content.slice().sort(), doc.content.slice().sort())) {
        vm.imageUID++;
      } else if (!vm.dir || !doc) {
        vm.imageUID++;
      }
      vm.dir = $.extend(true, {}, doc);
    },
    searchByImage() {
      var vm = this, propsData = {
        parentId: vm.dir._id,
        url: '/model/directory/searchImageByImage',
        callback: function(res) {
          $modal.cancel();
          vm.dir.content = res.result;
        },
        title: '搜索图片'
      };
      var $el = $("<div></div>").appendTo(vm.$el);
      var $modal = new imageSearchModalC(
        {
          el: $el[0],
          propsData,
          parent: this
        }
      );
    },
    createDirectory(parent_id, cb) {
      var vm = this, propsData = {
        doc: {
          _id: parent_id,
          name: ''
        },
        args: {
          parent: parent_id
        },
        url: '/model/directory/create',
        callback: function(res) {
          cb && cb();
          $modal.cancel();
        },
        title: '新建文件夹'
      };
      var $el = $("<div></div>").appendTo(vm.$el);
      var $modal = new nameModalC(
        {
          el: $el[0],
          propsData,
          parent: this
        }
      );
    },
    renameDirectory(doc, cb) {
      var vm = this;
      var $el = $("<div></div>").appendTo(vm.$el);
      var $modal = new nameModalC(
        {
          el: $el[0],
          propsData: {
            doc: doc,
            url: '/model/directory/rename',
            callback: function(res) {
              doc.name = res.self.name;
              cb && cb();
            },
            title: '重命名文件夹'
          },
          parent: this
        }
      );
    },
    removeDirectory(parent_id, doc, cb) {
      var vm = this, propsData = {
        doc: {
          _id: parent_id
        },
        args: {
          child_id: [doc._id]
        },
        url: '/model/directory/removeNext',
        callback: function(res) {
          cb && cb();
          $modal.cancel();
        },
        title: '删除确认',
        info: `是否确定删除目录： ${doc.name} ？`,
        level: 'danger'
      };
      var $el = $("<div></div>").appendTo(vm.$el);
      var $modal = new confirmModalC(
        {
          el: $el[0],
          propsData,
          parent: this
        }
      );
    },
    moveDirectory(parent_id, doc, cb) {
      var vm = this, propsData = {
        doc: {
          _id: parent_id
        },
        child_id: [doc._id],
        url: '/model/directory/move',
        callback: function(res) {
          cb && cb();
          $modal.cancel();
        },
        title: '移动文件夹' + doc.name,
      };
      var $el = $("<div></div>").appendTo(vm.$el);
      var $modal = new directoryMoveModalC(
        {
          el: $el[0],
          propsData,
          parent: this
        }
      );
    },
    moveImages(arr) {
      var vm = this, propsData = {
        doc: {
          _id: vm.dir._id
        },
        child_id: arr.slice(),
        url: '/model/directory/moveImages',
        callback: function(res) {
          vm.$refs.directory.reload();
          $modal.cancel();
        },
        title: `移动${arr.length}张图片到...`,
      };
      var $el = $("<div></div>").appendTo(vm.$el);
      var $modal = new imageMoveModalC(
        {
          el: $el[0],
          propsData,
          parent: this
        }
      );
    },
    copyImages(arr) {
      var vm = this, propsData = {
        doc: {
          _id: vm.dir._id
        },
        child_id: arr.slice(),
        url: '/model/directory/copyImages',
        callback: function(res) {
          vm.$refs.directory.reload();
          // $modal.cancel();
        },
        title: `复制${arr.length}张图片到...`,
      };
      var $el = $("<div></div>").appendTo(vm.$el);
      var $modal = new imageMoveModalC(
        {
          el: $el[0],
          propsData,
          parent: this
        }
      );
    },
    uploadToCurDirectory() {
      var vm = this;
      if (!vm.dir) {
        return;
      }
      vm.$modal.show(uploader, {
        directory: vm.dir._id,
        callback: function(files) {
          vm.$refs.directory.reload();
        }
      }, {
        name: 'dynamic-modal',
        resizable: false,
        adaptive: false,
        draggable: false,
        clickToClose: false,
        scrollable: false,
        width: "800px",
        height: "auto"
      })
    },
    removeFromCurDirectory(arr) {
      var vm = this;
      if (!vm.dir) {
        return;
      }
      var vm = this, propsData = {
        doc: {
          _id: vm.dir._id
        },
        args: {
          child_id: arr
        },
        url: '/model/directory/removeImages',
        callback: function(res) {
          vm.$refs.directory.reload();
          $modal.cancel();
        },
        title: '删除确认',
        info: `是否确定删除选中的${arr.length}张图片？`,
        level: 'danger'
      };
      var $el = $("<div></div>").appendTo(vm.$el);
      var $modal = new confirmModalC(
        {
          el: $el[0],
          propsData,
          parent: this
        }
      );
    },
    renameImage(doc) {
      var vm = this, propsData = {
        doc: {
          _id: doc._id,
          name: doc.baseInfo.name.replace(/\.\w+$/, '')
        },
        args() {
          return {
            name: $modal.name + extName  
          }
        },
        url: '/model/image/rename',
        callback: function(res) {
          for (var i in doc) {
            doc[i] = res.self[i];
          }
          propsData.doc.name = doc.baseInfo.name.replace(/\.\w+$/, '');
        },
        title: '重命名图片'
      };
      var $el = $("<div></div>").appendTo(vm.$el);
      var extName = doc.baseInfo.name.match(/\.\w+$/);
      extName = extName ? extName[0] : '';
      var $modal = new nameModalC(
        {
          el: $el[0],
          propsData,
          parent: this
        }
      );
    },
    addImageInfo(doc) {
      var vm = this;
      var $el = $("<div></div>").appendTo(vm.$el);
      var $modal = new extendInfoC(
        {
          el: $el[0],
          propsData: {
            doc: {
              _id: doc._id,
              info: null
            },
            url: '/model/image/addExtendInfo',
            callback: function(res) {
              for (var i in doc) {
                doc[i] = res.self[i];
              }
              $modal.cancel();
            },
            title: '添加图片自定义信息'
          },
          parent: this
        }
      );
    },
    editExtendInfo(doc, info) {
      var vm = this, propsData = {
        doc: {
          _id: doc._id,
          info
        },
        url: '/model/image/updateExtendInfo',
        callback: function(res) {
          for (var i in doc) {
            doc[i] = res.self[i];
          }
          doc.extendInfo.forEach(x => x._id == info._id && (Object.assign(info, x)));
        },
        title: '修改图片自定义信息'
      };
      var $el = $("<div></div>").appendTo(vm.$el);
      var $modal = new extendInfoC(
        {
          el: $el[0],
          propsData,
          parent: this
        }
      );
    },
    removeExtendInfo(doc, info) {
      var vm = this, propsData = {
        doc: {
          _id: doc._id
        },
        args: {
          info
        },
        url: '/model/image/removeExtendInfo',
        callback: function(res) {
          for (var i in doc) {
            doc[i] = res.self[i];
          }
          $modal.cancel();
        },
        title: '删除确认',
        info: `是否确定删除该自定义信息： ${info.title + ' - ' + info.content} ？`,
        level: 'danger'
      };
      var $el = $("<div></div>").appendTo(vm.$el);
      var $modal = new confirmModalC(
        {
          el: $el[0],
          propsData,
          parent: this
        }
      );
    }
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  flex: 1;
  overflow: hidden;
  background: white;
}

body {
  display: flex;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.scrollbar-track-x,
.scrollbar-track-x>.scrollbar-thumb {
    height: 5px !important;
}
.scrollbar-track-y,
.scrollbar-track-y>.scrollbar-thumb {
    width: 5px !important;
}

</style>

